 <template>
  <!-- 详细内容页面 -->
  <div id="container" v-loading="loading" v-show="!isEmpty">
    <!-- <el-collapse v-model="activeNames" v-loading="loading"> -->
    <!-- <el-collapse-item title="基本信息" name="1"> -->
    <deliver-detail ref="detail" :form="deliverData"></deliver-detail>
    <!-- </el-collapse-item> -->
    <!-- <el-collapse-item title="产品信息" name="2"> -->
    <produce-products-detail
      ref="productsDetail"
      :list="deliverData.deliverProducts"
    ></produce-products-detail>

    <!-- </el-collapse-item>
   
    </el-collapse> -->
  </div>

  <el-empty
    description="暂无配送信息"
    v-show="isEmpty"
    style="height: 500px"
  ></el-empty>
  <div class="button">
    <el-button
      type="primary"
      plain
      :loading="preLoading"
      @click="prePage"
      :disabled="preDisabled"
      >上一页</el-button
    >
    <el-button
      type="primary"
      plain
      :loading="nextLoading"
      @click="nextPage"
      :disabled="nextDisabled"
      >下一页</el-button
    >
  </div>
</template>
<script>
import produceProductsDetail from './components/produceProductsDetail.vue'
import deliverDetail from './components/deliverDetail.vue'
import { queryTypeByDic } from '@/utils/getData'
export default {
  name: 'detail',
  data () {
    return {
      activeNames: ['1'],
      checkCofig: [],
      loading: false,
      deliverData: {},
      deliveryType: [],//送货状态
      deliverWay: [],//发货方式
      limit: 1,
      page: 1,
      preLoading: false,
      nextLoading: false,
      preDisabled: false,
      nextDisabled: false,
      isEmpty: false
    }
  },
  components: {
    deliverDetail,
    produceProductsDetail,
  },
  beforeMount () {
    this.getType()
  },
  mounted () {

  },
  methods: {
    // 获取类型
    async getType () {
      // 发货状态
      this.deliveryType = await queryTypeByDic('deliverStatus')
      // 发货方式
      this.deliverWay = await queryTypeByDic('deliverType')
      this.getDetail()
    },
    async getDetail () {
      if (this.page == 1) this.preDisabled = true
      this.loading = true
      let param = {
        contractId: this.$route.query.id,
        limit: this.limit,
        page: this.page
      }
      let { data } = await this.$API.contract.detailList.getDeliverDetail.get(param)
      this.deliverData = data[0] ? data[0] : {}
      let arr = Object.keys(this.deliverData)
      if (arr.length == 0) {
        this.isEmpty = true
      } else {
        this.isEmpty = false
        this.deliveryType.forEach(item => {
          if (item.value == this.deliverData.type) {
            this.deliverData.typeName = item.name
          }
        })
        this.deliverWay.forEach(item => {
          if (item.value == this.deliverData.deliverType) {
            this.deliverData.deliverWayName = item.name
          }
        })
      }
      // if (data.length != 0) {
      //   this.deliverData = data[0]
      //   this.deliveryType.forEach(item => {
      //     if (item.value == this.deliverData.type) {
      //       this.deliverData.typeName = item.name
      //     }
      //   })
      //   this.deliverWay.forEach(item => {
      //     if (item.value == this.deliverData.deliverType) {
      //       this.deliverData.deliverWayName = item.name
      //     }
      //   })
      // }
      this.loading = false
    },
    // 上一页
    prePage () {
      if (this.page > 1) {
        this.preDisabled = false
        this.nextDisabled = false
        this.page--
      } else {
        this.preDisabled = true
      }
      this.getDetail()
    },
    // 下一页
    async nextPage () {
      this.preDisabled = false
      this.page++
      this.getDetail()

    }

  }
}
</script>
<style lang='scss' scoped>
#container {
  margin: 10px;
  :deep(.el-collapse-item__header) {
    padding-left: 20px;
    font-size: 16px;
  }
  :deep(.el-collapse-item__content) {
    padding: 0 20px 20px 20px;
  }
  :deep(.el-form-item) {
    margin-bottom: 5px;
  }
  :deep(.el-form-item__label) {
    color: #999;
  }
  .button {
    margin-top: 30px;
  }
}
</style>